import React, { useEffect, useState } from 'react'
import 'antd/dist/reset.css';
import './App.css';

import { Divider } from 'antd';

import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'

function App() {

    // const [todos, setTodos] = useState([
    //     { id: 1, name: "吃饭", isDone: false },

    //     { id: 2, name: "睡觉", isDone: false },

    //     { id: 3, name: "看书", isDone: false },
    // ])
    const [todos, setTodos] = useState([])

    // 进入到组件后先从local中获取数据
    useEffect(() => {
        const data = JSON.parse(localStorage.getItem('todos'))
        if(data) {
            setTodos(data)
        }
    }, [])

    // 新增任务
    const addTodo = (newtodo) => {
        const newTodos = [...todos, newtodo]
        setTodos(newTodos)

        // 存到local中
        localStorage.setItem('todos', JSON.stringify(newTodos))
    }

    // 删除任务
    const deleteTodo = (id) => {
        const newTodos = todos.filter(item => item.id !== id)
        setTodos(newTodos)

        // 存到local中
        localStorage.setItem('todos', JSON.stringify(newTodos))
    }

    // 修改任务状态
    const finishedChange = (todoItem) => {
        todos.forEach(item => {
            if(item.id === todoItem.id) {
                item.isDone = todoItem.isDone
            }
        })
        setTodos([...todos])

        // 存到local中
        localStorage.setItem('todos', JSON.stringify(todos))
    }

    // 全选和反选
    const CheckTodoAll = (list) => {
        setTodos(list)
    }
    
    // 清空完成的任务
    const clearTodos = () => {
        const newTodos = todos.filter(item => !item.isDone)
        setTodos(newTodos)

        // 存到local中
        localStorage.setItem('todos', JSON.stringify(newTodos))
    }

    return (
        <div className="App">

            <h1>Hello</h1>

            <div className="todo-wrap">

                <Header addTodo={addTodo} />

                <List todos={todos} deleteTodo={deleteTodo} finishedChange={finishedChange} />

                <Divider />
                <Footer todos={todos} clearTodos={clearTodos} CheckTodoAll={CheckTodoAll} />

            </div>

        </div>
    );
}

export default App;
